<template>
	<view class="pa">
		<!-- 注释 -->
		<view class="tips pad" v-if="verifyFlag">
			<text>注：</text>
			加入跑团的时候，需要审核
		</view>
		<view>
			<view :class="['join_list', item.type == 'image' ? 'join_list_l' : '']" v-for="(item, index) in inform" :key="index">
				<view class="joinrun_l">
					<i class="icon" v-if="item.not_null">&#xe83d;</i>
					{{ item.name }}
				</view>
				<view class="joinrun_r">
					<input
						type="text"
						v-model="item.value"
						placeholder-style="color:#999999;font-size:28upx"
						v-if="item.type == 'text' && item.name != '手机号' && !version"
						@blur="verify(item)"
						:placeholder="'请输入您的' + item.name"
					/>
					<view class="" v-if="version">
						<input
							type="text"
							placeholder-class="place"
							v-if="item.type == 'text' && item.name != '手机号' && item.name != '证件号'"
							@blur="verify(item)"
							v-model="item.value"
							:placeholder="'请输入您的' + item.name"
						/>
						<input
							type="idcard"
							placeholder-class="place"
							v-if="item.type == 'text' && item.name == '证件号'"
							@blur="verify(item)"
							v-model="item.value"
							:placeholder="'请输入您的' + item.name"
						/>
					</view>
					<input
						type="number"
						placeholder-style="color:#999999;font-size:28upx"
						v-if="item.type == 'number' || item.name == '手机号'"
						@blur="verify(item)"
						v-model="item.value"
						:placeholder="'请输入您的' + item.name"
					/>
					<view class="choose_date" v-if="item.type == 'radio'">
						<input type="text" disabled="true" v-model="item.value" :placeholder="'请选择您的' + item.name" placeholder-style="color:#999999;font-size:28upx" />
						<i class="icon">&#xe637;</i>
						<picker :range="item.data_sex" range-key="label" @change="changesex($event, index)" class="pick"></picker>
					</view>
					<!-- 上传照片 -->
					<view class="up_img" v-if="item.type == 'image'" @tap="upimg(index)">
						<image v-if="header_img" :src="header_img" mode=""></image>
						<!-- <image v-else src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_upimg.png" mode=""></image> -->
						<image v-else src="https://ykp-new.oss-cn-hangzhou.aliyuncs.comn-hangzhou.aliyuncs.com/singup_upimg.png" mode=""></image>
					</view>
					<!-- 出生日期 -->
				<!-- 	<view class="choose_date" v-if="item.type == 'date'">
						<input type="text" disabled="true" v-model="item.value" placeholder="请选择您的出生日期" placeholder-style="color:#999999;font-size:28upx" />
						<i class="icon">&#xe637;</i>
						<picker
							class="pick"
							mode="date"
							:start="item.limit ? item.start_time : startDate"
							:end="item.limit ? item.end_date : endDate"
							@change="pickchange($event, index)"
						></picker>
					</view> -->
					<!-- 选择生日 -->
					<view class="choose_date" 
					v-else-if="item.type == 'date'" 
					@tap="chooseBrith(index)">
						<input type="text" disabled="true" v-model="item.value" placeholder="请选择您的出生日期" placeholder-style="color:#999999;font-size:28upx" />
						<i class="icon">&#xe649;</i>
					</view>
					<view class="choose_date" v-if="item.type == 'select'">
						<input type="text" disabled="true" v-model="item.value" :placeholder="'请选择您的' + item.name" placeholder-style="color:#999999;font-size:28upx" />
						<i class="icon">&#xe637;</i>
						<picker :range="item.data" range-key="label" @change="changecard($event, index)" class="pick"></picker>
					</view>
					<!-- 多行文本 -->
					<textarea
						auto-height="true"
						v-model="item.value"
						class="te_area"
						placeholder-class="place"
						:placeholder="'请输入您的' + item.name"
						v-if="item.type == 'textarea'"
					/>
					<!-- 上传照片 -->
					<view class="up_img" v-if="item.type == 'image'" @tap="upimg(index)">
						<image v-if="item.value" :src="item.value" mode="aspectFill"></image>
						<image v-else src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/singup_upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交审核 -->
		<view class="btn" @tap="tojoin">申请加入</view>
		<navigation></navigation>
		<!-- 选择生日 -->
		<w-picker 
		    mode="date" 
			:startYear= "birthLimitStart"
			:endYear= "birthLimitEnd? birthLimitEnd: ''"
		    :current="true" 
		    @confirm="onConfirmBirth"
		    :disabledAfter="true"
		    ref="chooseBirth" 
		    themeColor="#f00"
		></w-picker>
		<!-- 加载 -->
		<loading v-if="loadFlag"></loading>
	</view>
</template>

<script>
import navigation from '@/components/navigation/navigation.vue';
import wPicker from '@/components/w-picker/w-picker.vue';
import loading from '@/components/loading/loading.vue'
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools';
function getDate(type) {
	const date = new Date();

	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 60;
	} else if (type === 'end') {
		year = year + 0;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day-1}`;
}
export default {
	components: {
		navigation,
		wPicker,
		loading
	},
	data() {
		return {
			loadFlag:true,
			form: {},
			index: '',
			array: ['男', '女'],
			club_id: '',
			inform: [],
			startDate: getDate('start'),
			endDate: getDate('end'),
			header_img: '',
			version: '' ,// 判断是不是h5
			verifyFlag:'' ,//入会是否需要审核
			userSign: {} ,// 报名人信息
			birthLimitStart: '1970',  //时间限制
			birthLimitEnd: '',
			disabledAfter: true,
			birthIndex: ''
		};
	},
	onLoad(options) {
		this.club_id = options.id;
	},
	mounted() {
		this.getset();
		this.version = uni.getSystemInfoSync().version;
		this.getUserSign()
	},
	methods: {
		// 获取用户信息
		getUserInfo() {
			this.ajax('user/userInfo', {
				success: res => {
					 // console.log (res);
					this.userInfo = res.msg;
				}
			});
		},
		// 选择生日
		chooseBrith (index) {
			this.birthIndex = index;
			this.$refs.chooseBirth.show();
			 // console.log (this.inform[index]);
			let birth = this.inform[index]
			if(birth.limit) {
				this.birthLimitStart = birth.start_date.split('-')[0]
				this.birthLimitEnd = birth.end_date.split('-')[0]
			}else {
				 // console.log (1234567);
				this.birthLimitStart = '1970'
				this.birthLimitEnd = new Date().getFullYear()+''
			}
		},
		onConfirmBirth (e) {
			let birth = this.inform[this.birthIndex]
			 // console.log (birth);
			let birthTime  = new Date(e.result).getTime()
			if( birth.limit && birthTime > birth.data[0] && birthTime < birth.data[1]) {
				birth.value =  e.result;
			}else if(birth.limit && birthTime < birth.data[0] ) {
				birth.value =  birth.start_date;
			}else if(birth.limit && birthTime > birth.data[1] ) {
				birth.value =  birth.end_date;
			}else if(!birth.limit){
				birth.value =  e.result;
			}
			 // console.log (birth.value);
			 // console.log (e);
			// this.form[this.birthIndex].data[this.birthKey].value = e.result;
		},
		// 获取用户报名信息
		getUserSign() {
			this.ajax('user/userSign', {
				success: res => {
					//  // console.log (res);
					this.loadFlag = false;
					if(res.msg.emall  == null ) {
						res.msg.emall = ''
					}
					this.ajax('user/userInfo', {
						success: user => {
							
						res.msg.name = user.msg.MemberName;
						res.msg.mobile = user.msg.Phone;
						this.userSign = res.msg;
						//  // console.log (this.inform);
						this.inform.forEach ( item => {
							 // console.log (item);
							if(item.name == '姓名') {
								item.value = res.msg.name
							}else if( item.name == '手机号' ) {
								item.value = res.msg.mobile
							}else if( item.name == '证件类型' ) {
								item.value = res.msg.card_type
							}else if( item.name == '证件号' ) {
								item.value = res.msg.card_no
							}else if( item.name == '生日' ) {
								var birthTime = new Date(res.msg.birth).getTime()
								if (item.limit && birthTime > item.data[0] && birthTime < item.data[1]) {
									item.value = res.msg.birth
								}else if(!item.limit){
									item.value = res.msg.birth
								}else {
									item.value = ''
								}
								 // console.log (new Date(res.msg.birth).getTime());
							}else if( item.name == '性别' ) {
								if( item.limit && res.msg.sex == item.data_sex[0].label || !item.limit) {
									item.value = res.msg.sex
								}else {
									item.value = ''
								}
							}else if( item.name == '血型' ) {
								var blood = item.data.map ( items => {
									return items.label == res.msg.blood
								} )
								if( blood.indexOf(true) > -1) {
									item.value = res.msg.blood
								}else {
									item.value = ''
								}
								 // console.log (blood.indexOf(true));
								 // console.log (blood);
								 // console.log (item.value);
							}else if( item.name == '服装尺码' ) {
								item.value = res.msg.dress_size
							}else if( item.name == '鞋子尺码' ) {
								item.value = res.msg.shoes_size
							}else if( item.name == '邮箱' ) {
								item.value = res.msg.emall
							}else if( item.name == '跑龄' ) {
								item.value = res.msg.run_age
							}else if( item.name == '城市' ) {
								item.city = res.msg.city.split('/')[1]
								item.value = res.msg.city.split('/')[1]
							}else if( item.name == '紧急联系人' ) {
								item.value = res.msg.contact_person
							}else if( item.name == '紧急联系方式' ) {
								item.value = res.msg.contact_mobile
							}
						})
						}
					})
				}
			});
		},
		// 验证
		verify(item) {
			if (item.name == '手机号' && item.value) {
				if (!item.value) {
					this.toast('请输入手机号');
				} else if (!/^1[3456789]\d{9}$/.test(item.value)) {
					this.toast('手机号位数不对');
					item.value = '';
					return false;
				}
			} else if (item.name == '邮箱' && item.value) {
				if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(item.value)) {
					this.toast('邮箱有误，请输入正确的邮箱');
					item.value = '';
					return false;
				}
			} else if (item.name == '证件号' && item.value) {
				var reg = /^(^[1-9]\d{5}[1-9]\d{3}(((0[2])([0|1|2][0-8])|(([0-1][1|4|6|9])([0|1|2][0-9]|[3][0]))|(((0[1|3|5|7|8])|(1[0|2]))(([0|1|2]\d)|3[0-1]))))((\d{4})|\d{3}[Xx])$)$/;
				if (!reg.test(item.value)) {
					this.toast('证件号有误，请输入正确的证件号');
					item.value = '';
					return false;
				}
			}
		},
		//  上传图片
		upimg(index) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					var sys_info = uni.getSystemInfoSync();
					if (sys_info.version) {
						 // console.log (sys_info.version);
						uni.showLoading({
							title: '图片上传中'
						});
						var arr = res.tempFilePaths[0].split('/');
						var filename = arr[arr.length - 1];
						this.oss_upload(res, filename, {
							success: res => {
								this.inform[index].value = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + filename;
								uni.hideLoading();
							},
							fail: ress => {}
						});
					} else {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								 // console.log (base64, 111);
								// this.header_img = base64;
								// this.img_type = base64.split(';')[0].split('/')[1];
								uni.showLoading({
									title: '图片上传中'
								});
								// 获取图片信息
								//获取文件名称
								var arr = res.tempFilePaths[0].split('/');
								var filename = arr[arr.length - 1];
								var timestamp = new Date().getTime();
								var name = timestamp + '.' + this.img_type;
								this.oss_upload(res, name, {
									success: res => {
										this.inform[index].value = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + name;
										// this.header_img = filename;
										uni.hideLoading();
									},
									fail: ress => {}
								});
							})
							.catch(error => {
								console.error(error);
							});
					}
				}
			});
		},
		changesex(e, index) {
			 // console.log (e);
			this.inform[index].value = this.inform[index].data_sex[e.target.value].label;
		},
		// 获取跑团会员配置信息
		getset() {
			this.ajax('club/clubSetting', {
				data: {
					club_id: this.club_id
				},
				success: res => {
					//  // console.log (res.msg)
					var info = res.msg.in_form;
					info.forEach(item => {
						item.value = '';
						//  // console.log (item)
						var val = item.data;
						if (item.name == '性别') {
							item.data_sex = [{ label: '男', value: '0' }, { label: '女', value: '1' }];
						}
						if (item.type == 'date' && item.limit) {
							item.start_date = this.timestamp(item.data[0]);
							item.end_date = this.timestamp(item.data[1]);
						}
					});
					 // console.log (res);
					this.verifyFlag = res.msg.in_verify
					this.inform = res.msg.in_form;
					var fo = res.msg.in_form;
					 // console.log (this.inform);
					//  // console.log (this.inform[0])
				}
			});
		},
		// 时间戳转为时间
		timestamp(time) {
			var date = new Date(time);
			 // console.log (date);
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDay();
			if (month < 10) month = '0' + month;
			if (day < 10) day = '0' + day;
			return `${year}-${month}-${day}`;
		},
		// 验证手机号
		textmobile(key) {
			 // console.log (key);
			var mobile_phone = this.inform[key].value;
			if (!/^1[34578]\d{9}$/.test(mobile_phone)) {
				this.toast('手机号格式错误');
			}
		},
		// 选择出生日期
		pickchange(e, index) {
			this.inform[index].value = e.target.value;
		},
		// 选择证件类型
		changecard(e, index) {
			 // console.log (e);
			this.inform[index].value = this.inform[index].data[e.target.value].label;
		},
		tojoin() {
			this.ajax('club/applyInUser', {
				data: {
					club_id: this.club_id,
					// mobile: this.form.mobile,
					// sex: this.form.sex,
					// name: this.form.name
					form: this.inform
				},
				success: res => {
					//  // console.log (res)
					if (!res.code) {
						this.toast(res.msg);
					} else {
						if (this.verifyFlag) {
							this.toast('提交成功，请等待审核')
						}else {
							this.toast('提交成功')
						}
						setTimeout(() => {
							// uni.navigateBack({
							// 	delta: 1
							// });
							uni.reLaunch({
								url:'/pageB/run/rungroup?id='+this.club_id
							})
						}, 2000);
					}
				}
			});
			 // console.log (this.inform);
		}
	}
};
</script>

<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="less" scoped>
@import url('../../static/less/pageB/run/joinrun.less');
</style>
